<template>
  <div class="song_detail">
    <header class="cl" v-if="song_detail_data.code == 200">
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">
        <p class="title">{{song_detail_data.songs[0].name}}</p>
        <p class="name">
          <span v-for="(item,index) in song_detail_data.songs[0].ar" :key="index">
            {{item.name}}
            <span v-if="index<song_detail_data.songs[0].ar.length-1">/</span>
          </span>
          <i></i>
        </p>
      </div>
      <div class="right">
        <i></i>
      </div>
    </header>
    <main v-if="song_detail_data.code == 200">
      <div class="disc">
        <img class="pole" id="pole" src="../images/bd7.png" alt />
        <img src="../images/bbe.png" alt />
        <img
          class="pic"
          id="pic"
          :style="{transform:'rotatez(' + rot + 'deg)'}"
          v-lazy="song_detail_data.songs[0].al.picUrl"
          alt
        />
      </div>
    </main>
    <footer v-if="song_detail_data.code == 200">
      <div class="related">
        <div @click.stop="like(song_detail_data.songs[0].id)">
          <i :class="likeflag? 'likeTrue':'likeFalse'"></i>
        </div>
        <div @click.stop="downSong()">
          <img src="../images/bc5.png" alt />
        </div>
        <!-- <div>
          <img src="../images/bbv.png" alt />
        </div>-->
        <div class="comment" @click="commentJump()">
          <img
            :src="comment_music_data.code == 200?require('../images/bbh.png'):require('../images/bbg.png')"
            alt
          />
          <i class="commentNum">{{comment_music_data.total | setCommentNum}}</i>
        </div>
        <div class="more" @click="more()">
          <img src="../images/bcj.png" alt />
        </div>
      </div>
      <div class="audio">
        <div class="audio-box">
          <div class="a-progress">
            <span class="played-time" id="playedTime">00:00</span>
            <div class="pgs-total">
              <div class="pgs-play" id="progress" style="width: 0%;"></div>
            </div>
            <span class="audio-time" id="audioTime">00:00</span>
          </div>
          <div class="a-controls">
            <button class="play-pause" id="playPause" @click.stop="playPause()">
              <span class="icon-btn" :class="[playPause_data==true ? 'icon-play':'icon-pause']"></span>
            </button>
            <div class="skip-ward s-right" @click="playList()"></div>
            <div class="skip-ward s-left" :class="'rule'+play_rule_flag" @click.stop="playRule()"></div>
            <div class="turn-ward t-right" @click.stop="nextSong()"></div>
            <div class="turn-ward t-left" @click.stop="prevSong()"></div>
          </div>
        </div>
      </div>
    </footer>
    <v-song-list :showFlag="isSongList" @childEvent="parentMethod" :song_id="song_id"></v-song-list>
    <v-song-check-pop v-show="!song_check_data.success" :message="song_check_data.message"></v-song-check-pop>
    <!-- 点击更多按钮出现底部详情栏 -->
    <VSongDetailMore
      v-if="isSongDetailMore"
      :songId="song_detail_data.songs[0].id"
      @songDatailClose="songDatailClose"
      @showUserPlaylist="showUserPlaylist"
      @artistsId="artistsId"
    ></VSongDetailMore>
    <!-- 用户歌单 -->
    <vUserPlaylist
      v-if="isUserPlaylist"
      :songId="song_detail_data.songs[0].id"
      @colseUserPlaylist="colseUserPlaylist"
      @showNewPlaylist="showNewPlaylist"
      @userTracksFail="tracksFail"
      @userTracksSuccess="tracksSuccess"
    ></vUserPlaylist>
    <!-- 新建歌单 -->
    <vNewPlaylist
      v-if="isNewPlaylist"
      @colseNewPlaylist="colseNewPlaylist"
      :name="song_detail_data.songs[0].name"
      :songId="song_detail_data.songs[0].id"
      @colseUserPlaylist="colseUserPlaylist"
      @tracksSuccess="tracksSuccess"
    ></vNewPlaylist>
    <!-- 底部灰色提示 -->
    <vBottomGrayPrompt :prompt_msg="bottomGrayPromptMsg" v-show="isBottomGrayPrompt"></vBottomGrayPrompt>
    <!-- 多个歌手名弹窗 -->
    <vArtistNamePopup
      v-show="isArtistNamePopup"
      :artistsIdList="artistsIdList"
      @colseArtistNamePopup="colseArtistNamePopup"
    ></vArtistNamePopup>
  </div>
</template>
<script>
import { mapState } from "vuex";
import vSongList from "@/components/song_list";
import vSongCheckPop from "@/components/song_check_pop";
import VSongDetailMore from "@/components/song_detail_more";
import vUserPlaylist from "@/components/user_playlist";
import vNewPlaylist from "@/components/new_playlist";
import vBottomGrayPrompt from "@/components/bottom_gray_prompt";
import vArtistNamePopup from "@/components/artist_name_popup";
export default {
  components: {
    vSongList,
    vSongCheckPop,
    VSongDetailMore,
    vUserPlaylist,
    vNewPlaylist,
    vBottomGrayPrompt,
    vArtistNamePopup
  },
  data() {
    return {
      isSongList: false,
      song_id: null,
      ids: localStorage.songIsPlayId,
      time: null,
      rot: 1,
      music: document.getElementById("audio"),
      foo: null,
      ffo: null,
      likeflag: false,
      userId: null,
      isSongDetailMore: false,
      isUserPlaylist: false, // 控制用户歌单显隐
      isNewPlaylist: false, // 控制新建歌单弹窗显隐
      bottomGrayPromptMsg: "", // 底部提示信息
      isBottomGrayPrompt: false, //是否显示底部提示
      isArtistNamePopup: false, // 是否显示多个歌手名选择弹窗
      artistsIdList: [] // 歌手id
    };
  },
  computed: {
    ...mapState("song_detail", ["song_detail_data"]),
    ...mapState("song_check", ["song_check_data"]),
    ...mapState("song_status", ["playPause_data"]),
    ...mapState("play_rule", ["play_rule_flag"]),
    ...mapState("likelist", ["likelist_data"]),
    ...mapState("song_url", ["song_url_data"]),
    ...mapState("comment_music", ["comment_music_data"])
  },
  watch: {
    // 监听歌曲数据变化
    song_detail_data(newVal) {
      if (this.$route.name === "SongDetail") {
        // this.$router.replace({
        //   name: "SongDetail",
        //   query: { ids: newVal.songs[0].id }
        // });
        // this.$route.query.ids = newVal.songs[0].id;
        if (this.likelist_data.ids) {
          if (this.likelist_data.ids.indexOf(newVal.songs[0].id) != -1) {
            this.likeflag = true;
          } else {
            this.likeflag = false;
          }
        }
        this.commentMusic();
        return newVal;
      }
    }
  },
  created() {
    this.refresh();

    var audio = document.getElementById("audio");

    if (this.ids) {
      this.$store
        .dispatch("song_check/getSongCheckData", { id: this.ids })
        .then(data => {
          this.$store
            .dispatch("song_detail/getSongDetailData", {
              ids: this.ids
            })
            .then(data => {
              this.$store
                .dispatch("song_url/getSongUrlData", {
                  id: this.ids,
                  br: "999000"
                })
                .then(data => {
                  localStorage.songIsPlayId = this.ids;
                  if (!audio.src) {
                    audio.src = data.data[0].url;
                  } else {
                    if (audio.src == data.data[0].url) {
                      this.updateProgress();
                      if (audio.paused) {
                        this.zhuan(true);
                        this.$store.commit("song_status/setPlayPause", false);
                      } else {
                        this.zhuan(false);
                        this.$store.commit("song_status/setPlayPause", true);
                      }
                    } else {
                      audio.src = data.data[0].url;
                    }
                  }
                });
            });
        });
    } else {
      this.$router.push({ name: "Home" });
    }

    audio.addEventListener("loadeddata", () => {
      let playPromise = audio.play();
      if (playPromise !== undefined) {
        playPromise
          .then(_ => {
            audio.play();
            this.zhuan(false);
            this.$store.commit("song_status/setPlayPause", true);
          })
          .catch(error => {
            audio.pause();
            this.zhuan(true);
            this.$store.commit("song_status/setPlayPause", false);
          });
      }
    });

    audio.addEventListener("loadedmetadata", () => {
      $("#audioTime").text(this.transTime(audio.duration));
    });

    audio.addEventListener("canplay", () => {
      audio.addEventListener("timeupdate", this.updateProgress, false); // 监听音频播放时间并更新进度条
      // audio.addEventListener("ended", this.audioEnded, false); // 监听播放完成事件
      if (audio.paused) {
        this.zhuan(true);
        this.$store.commit("song_status/setPlayPause", false);
      } else {
        this.zhuan(false);
        this.$store.commit("song_status/setPlayPause", true);
      }
    });
    let vm = this;
    $(document).on("touchend", ".pgs-total", function(e) {
      var audio = document.getElementById("audio");
      var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
      var X = x < 0 ? 0 : x;
      var W = $(this).width();
      var place = X > W ? W : X;
      audio.currentTime = (place / W) * audio.duration;
      $(this)
        .children()
        .css({ width: (place / W) * 100 + "%" });
      vm.updateProgress();
      if (audio.paused) {
        vm.$store.commit("song_status/setPlayPause", false);
      } else {
        vm.$store.commit("song_status/setPlayPause", true);
      }
    });
  },
  methods: {
    // 关闭多个歌手名弹窗
    colseArtistNamePopup() {
      this.isArtistNamePopup = false;
      this.artistsIdList = [];
    },
    // 获取多个歌手id
    artistsId({ idList }) {
      for (let i = 0; i < idList.length; i++) {
        let element = idList[i];
        this.$store
          .dispatch("artists/getArtists", { id: element })
          .then(data => {
            this.artistsIdList.push(data);
          });
      }
      this.isSongDetailMore = false;
      this.isArtistNamePopup = true;
    },
    // 收藏歌曲失败
    tracksFail() {
      this.bottomGrayPromptMsg = "歌曲已存在";
      this.isBottomGrayPrompt = true;
      setTimeout(() => {
        this.isBottomGrayPrompt = false;
        this.bottomGrayPromptMsg = "";
      }, 3000);
    },
    // 收藏歌曲成功
    tracksSuccess() {
      this.bottomGrayPromptMsg = "已收藏到歌单";
      this.isBottomGrayPrompt = true;
      setTimeout(() => {
        this.isBottomGrayPrompt = false;
        this.bottomGrayPromptMsg = "";
      }, 3000);
    },
    //控制新建歌单弹窗显示
    showNewPlaylist() {
      this.isNewPlaylist = true;
    },
    // 控制新建歌单弹窗隐藏
    colseNewPlaylist() {
      this.isNewPlaylist = false;
    },
    // 控制用户歌单显示
    showUserPlaylist() {
      this.isUserPlaylist = true;
    },
    // 控制用户歌单隐藏
    colseUserPlaylist() {
      this.isUserPlaylist = false;
    },
    // 底部详情栏关闭
    songDatailClose() {
      this.isSongDetailMore = false;
    },
    // 点击更多按钮弹出底部详情栏
    more() {
      this.isSongDetailMore = true;
    },
    // 跳转评论页
    commentJump() {
      this.$router.push({
        name: "CommentMusic",
        query: { id: this.song_detail_data.songs[0].id }
      });
    },
    // 评论数量获取
    commentMusic() {
      this.$store.dispatch("comment_music/getCommentMusic", {
        id: this.song_detail_data.songs[0].id,
        offset: 1,
        limit: 1
      });
    },
    // 下载歌曲逻辑
    downloadFile(fileName, authers, encodeType, content) {
      fetch(content).then(res =>
        res.blob().then(blob => {
          var a = document.createElement("a");
          var url = window.URL.createObjectURL(blob);
          var filename = fileName + "-" + authers + "." + encodeType;
          a.href = url;
          a.download = filename;
          a.click();
          window.URL.revokeObjectURL(url);
        })
      );
    },
    // 点击下载歌曲
    downSong() {
      let authers = "";
      this.song_detail_data.songs[0].ar.forEach((item, index) => {
        authers += item.name;
        if (index < this.song_detail_data.songs[0].ar.length - 1) {
          authers += "&";
        }
      });
      this.downloadFile(
        this.song_detail_data.songs[0].name,
        authers,
        this.song_url_data.data[0].encodeType,
        this.song_url_data.data[0].url
      );
    },
    // 点击喜欢歌曲
    like(id) {
      this.$store
        .dispatch("likelist/getLike", { id: id, like: !this.likeflag })
        .then(data => {
          this.likeflag = !this.likeflag;
          if (this.likeflag) {
            this.likelist_data.ids.push(id);
          } else {
            this.likelist_data.ids.splice(
              this.likelist_data.ids.indexOf(id),
              1
            );
          }
        });
    },
    // 初始化喜欢歌曲列表
    likelist(uid) {
      this.$store.dispatch("likelist/getLikelist", { uid: uid }).then(data => {
        if (data.ids.indexOf(this.song_detail_data.songs[0].id) != -1) {
          this.likeflag = true;
        } else {
          this.likeflag = false;
        }
      });
    },
    // 初始化喜欢歌曲列表
    refresh() {
      this.$store
        .dispatch("login_refresh/getLoginRefreshData", {})
        .then(data => {
          if (data.code == 200) {
            this.$store
              .dispatch("login_status/getLoginStatusData", {})
              .then(data => {
                if (data.code == 200) {
                  this.userId = data.profile.userId;
                  this.$store
                    .dispatch("user_detail/getUserDetailData", {
                      uid: this.userId
                    })
                    .then(data => {
                      this.likelist(this.userId);
                    });
                }
              });
          }
        });
    },
    // 随机播放逻辑
    randomSong(inIndex, c_list) {
      let rIndex = Math.floor(Math.random() * c_list.length);
      if (rIndex != inIndex) {
        this.$store
          .dispatch("song_check/getSongCheckData", {
            id: c_list[rIndex]
          })
          .then(value => {
            if (value) {
              this.$store
                .dispatch("song_detail/getSongDetailData", {
                  ids: c_list[rIndex]
                })
                .then(data => {
                  this.$store
                    .dispatch("song_url/getSongUrlData", {
                      id: c_list[rIndex],
                      br: "999000"
                    })
                    .then(data => {
                      localStorage.songIsPlayId = c_list[rIndex];
                      if (!this.music.src) {
                        this.music.src = data.data[0].url;
                      } else {
                        if (this.music.src == data.data[0].url) {
                          if (!this.music.paused) {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          } else {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              false
                            );
                          }
                        } else {
                          this.music.src = data.data[0].url;
                        }
                      }
                      let playPromise = this.music.play();
                      if (playPromise !== undefined) {
                        playPromise
                          .then(_ => {
                            this.music.play();
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          })
                          .catch(error => {});
                      }
                    });
                });
            }
          })
          .catch(data => {
            this.randomSong(rIndex, c_list);
          });
      }
    },
    // 上一首播放逻辑
    prevSongLogic(inIndex, c_list) {
      let index = inIndex - 1;
      if (inIndex > 0) {
        this.$store
          .dispatch("song_check/getSongCheckData", {
            id: c_list[index]
          })
          .then(value => {
            if (value) {
              this.$store
                .dispatch("song_detail/getSongDetailData", {
                  ids: c_list[index]
                })
                .then(data => {
                  this.$store
                    .dispatch("song_url/getSongUrlData", {
                      id: c_list[index],
                      br: "999000"
                    })
                    .then(data => {
                      localStorage.songIsPlayId = c_list[index];
                      if (!this.music.src) {
                        this.music.src = data.data[0].url;
                      } else {
                        if (this.music.src == data.data[0].url) {
                          if (!this.music.paused) {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          } else {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              false
                            );
                          }
                        } else {
                          this.music.src = data.data[0].url;
                        }
                      }
                      let playPromise = this.music.play();
                      if (playPromise !== undefined) {
                        playPromise
                          .then(_ => {
                            this.music.play();
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          })
                          .catch(error => {});
                      }
                    });
                });
            }
          })
          .catch(data => {
            this.prevSongLogic(index, c_list);
          });
      } else if (inIndex == 0) {
        this.music.currentTime = 0;
        this.music.pause();
        this.$store.commit("song_status/setPlayPause", false);
      }
    },
    // 下一首播放逻辑
    nextSongLogic(inIndex, c_list) {
      let index = inIndex + 1;
      if (inIndex < c_list.length - 1) {
        this.$store
          .dispatch("song_check/getSongCheckData", {
            id: c_list[index]
          })
          .then(value => {
            if (value) {
              this.$store
                .dispatch("song_detail/getSongDetailData", {
                  ids: c_list[index]
                })
                .then(data => {
                  this.$store
                    .dispatch("song_url/getSongUrlData", {
                      id: c_list[index],
                      br: "999000"
                    })
                    .then(data => {
                      localStorage.songIsPlayId = c_list[index];
                      if (!this.music.src) {
                        this.music.src = data.data[0].url;
                      } else {
                        if (this.music.src == data.data[0].url) {
                          if (!this.music.paused) {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          } else {
                            this.$store.commit(
                              "song_status/setPlayPause",
                              false
                            );
                          }
                        } else {
                          this.music.src = data.data[0].url;
                        }
                      }
                      let playPromise = this.music.play();
                      if (playPromise !== undefined) {
                        playPromise
                          .then(_ => {
                            this.music.play();
                            this.$store.commit(
                              "song_status/setPlayPause",
                              true
                            );
                          })
                          .catch(error => {});
                      }
                    });
                });
            }
          })
          .catch(data => {
            this.nextSongLogic(index, c_list);
          });
      } else if (inIndex == c_list.length - 1) {
        this.music.currentTime = 0;
        this.music.pause();
        this.$store.commit("song_status/setPlayPause", false);
      }
    },
    // 上一首
    prevSong() {
      this.music.currentTime = 0;
      this.music.pause();
      this.$store.commit("song_status/setPlayPause", false);
      if (localStorage.song_list_id) {
        let list = JSON.parse(localStorage.song_list_id);
        let c_list = [];
        for (let key in list) {
          if (list.hasOwnProperty(key)) {
            let element = list[key];
            c_list.push(element.id);
          }
        }
        let inIndex = c_list.indexOf(this.song_detail_data.songs[0].id);
        if (inIndex != -1) {
          if (this.play_rule_flag == 2) {
            this.randomSong(inIndex, c_list);
          } else {
            this.prevSongLogic(inIndex, c_list);
          }
        }
      }
    },
    // 下一首
    nextSong() {
      this.music.currentTime = 0;
      this.music.pause();
      this.$store.commit("song_status/setPlayPause", false);
      if (localStorage.song_list_id) {
        let list = JSON.parse(localStorage.song_list_id);
        let c_list = [];
        for (let key in list) {
          if (list.hasOwnProperty(key)) {
            let element = list[key];
            c_list.push(element.id);
          }
        }
        let inIndex = c_list.indexOf(this.song_detail_data.songs[0].id);
        if (inIndex != -1) {
          if (this.play_rule_flag == 2) {
            this.randomSong(inIndex, c_list);
          } else {
            this.nextSongLogic(inIndex, c_list);
          }
        }
      }
    },
    playList() {
      // if (!localStorage.song_list_id || localStorage.song_list_id == "[]") {
      //   this.isSongList = false;
      // } else {
      //   this.isSongList = true;
      // }
      this.isSongList = true;
    },
    parentMethod({ showFlag }) {
      this.isSongList = false;
    },
    playRule() {
      let num = this.play_rule_flag;
      switch (num) {
        case 0:
          num++;
          this.$store.commit("play_rule/setIsLoop", true);
          break;
        case 1:
          num++;
          this.$store.commit("play_rule/setIsLoop", false);
          break;
        case 2:
          num = 0;
          this.$store.commit("play_rule/setIsLoop", false);
          break;
        default:
          num = 0;
          this.$store.commit("play_rule/setIsLoop", false);
          break;
      }
      this.$store.commit("play_rule/setPlayRuleFlag", num);
    },
    back() {
      this.$router.go(-1);
    },
    playPause() {
      var audio = document.getElementById("audio");
      // 改变暂停/播放icon
      if (audio.paused) {
        let playPromise = audio.play();
        if (playPromise !== undefined) {
          playPromise
            .then(_ => {
              audio.play();
              this.zhuan(false);
              this.$store.commit("song_status/setPlayPause", true);
            })
            .catch(error => {});
        }
      } else {
        audio.pause();
        this.zhuan(true);
        this.$store.commit("song_status/setPlayPause", false);
      }
    },
    // 旋转
    zhuan(is_zhuan) {
      if (is_zhuan == true) {
        clearInterval(this.time);
        this.time = null;
        $("#pole").css({
          transform: "rotate(-20deg)"
        });
      } else {
        $("#pole").css({
          transform: "rotate(0deg)"
        });
        if (this.time == null) {
          this.time = setInterval(this.begin, 100);
        }
      }
    },
    begin(time) {
      this.rot += 1;
    },
    // 转换音频时长显示
    transTime(time) {
      var duration = parseInt(time);
      var minute = parseInt(duration / 60);
      var sec = (duration % 60) + "";
      var isM0 = ":";
      if (minute == 0) {
        minute = "00";
      } else if (minute < 10) {
        minute = "0" + minute;
      }
      if (sec.length == 1) {
        sec = "0" + sec;
      }
      return minute + isM0 + sec;
    },
    // 更新进度条
    updateProgress() {
      var audio = document.getElementById("audio");
      if (audio.duration) {
        $("#audioTime").text(this.transTime(audio.duration));
      }
      var value = Math.round(
        (Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100,
        0
      );
      $("#progress").css("width", value * 1 + "%");
      $("#playedTime").html(this.transTime(audio.currentTime));
    },
    // 播放完成
    audioEnded() {
      var audio = document.getElementById("audio");
      audio.currentTime = 0;
      audio.pause();
      this.$store.commit("song_status/setPlayPause", false);
      this.zhuan(true);
    },
    // 快进快退
    skipWard(value) {
      var audio = document.getElementById("audio");
      if (audio.currentTime + value >= audio.duration) {
        audio.currentTime = audio.duration;
      } else if (audio.currentTime + value <= 0) {
        audio.currentTime = 0;
      } else {
        audio.currentTime += value;
      }
    }
  },
  filters: {
    setCommentNum(total) {
      if (total) {
        if (total >= 10000) {
          return Math.floor(total / 10000) + "w+";
        } else if (total < 10000 && total >= 1000) {
          return Math.floor(total / 1000) + "k+";
        } else if (total < 1000) {
          return total;
        }
      }
    }
  }
};
</script>
<style>
.audio-box {
  margin: 0 auto;
}
.a-progress {
  box-sizing: border-box;
  width: 100%;
  margin: 0.2rem auto;
  position: relative;
  padding: 0 1.3rem;
  color: #c1c1c1;
}
.a-progress > span {
  font-size: 0.26rem;
  width: 0.8rem;
  position: absolute;
  top: 0px;
}
.a-progress .played-time {
  left: 0.4rem;
  text-align: left;
  color: #c8c8c8;
}
.a-progress .audio-time {
  right: 0.4rem;
  text-align: right;
  color: #979797;
}
.a-progress .pgs-total {
  width: 100%;
  height: 0.32rem;
  background-color: transparent;
  border-radius: 0.2rem;
  position: relative;
}
.a-progress .pgs-total:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.14rem;
  bottom: 0.14rem;
  background-color: #979797;
  border-radius: 0.2rem;
  z-index: -1;
}
.a-progress .pgs-total .pgs-play {
  height: 100%;
  position: relative;
  border-radius: 0.2rem;
}
.a-progress .pgs-total .pgs-play:before {
  content: "";
  position: absolute;
  top: 0.14rem;
  bottom: 0.14rem;
  left: 0;
  right: 0;
  background-color: #c8c8c8;
  border-radius: 0.2rem;
  z-index: 1;
}
.a-progress .pgs-total .pgs-play:after {
  content: "";
  position: absolute;
  right: -0.16rem;
  width: 0.2rem;
  height: 0.2rem;
  top: 70%;
  margin-top: -0.16rem;
  background-color: #dfdfdf;
  border-radius: 50%;
  z-index: 1;
}
.a-controls {
  width: 100%;
  padding: 0;
  position: relative;
  text-align: center;
  margin-bottom: 0.56rem;
}
.a-controls .play-pause {
  border: 0;
  outline: 0;
  padding: 0;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0 0.56rem;
  background: transparent;
}
.a-controls .play-pause .icon-btn {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.a-controls .play-pause .icon-play {
  background: url("../images/bb1.png");
  background-size: 100% 100%;
}
.a-controls .play-pause .icon-pause {
  background: url("../images/bb4.png");
  background-size: 100% 100%;
}
.a-controls .skip-ward {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  top: 50%;
  margin-top: -0.4rem;
}
.a-controls .s-left {
  left: 0.5rem;
}
.a-controls .s-left.rule0 {
  background: url("../images/bcd.png");
  background-size: 100% 100%;
}
.a-controls .s-left.rule1 {
  background: url("../images/bcl.png");
  background-size: 100% 100%;
}
.a-controls .s-left.rule2 {
  background: url("../images/bcz.png");
  background-size: 100% 100%;
}
.a-controls .s-right {
  right: 0.5rem;
  background: url("../images/bd2.png");
  background-size: 100% 100%;
}
.a-controls .turn-ward {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  top: 50%;
  margin-top: -0.4rem;
}
.a-controls .t-left {
  left: 30%;
  margin-left: -0.4rem;
  background: url("../images/abv.png");
  background-size: 100% 100%;
}
.a-controls .t-right {
  right: 30%;
  margin-right: -0.4rem;
  background: url("../images/baz.png");
  background-size: 100% 100%;
}
</style>
<style lang="scss" scoped>
.song_detail {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: rgba($color: #535353, $alpha: 0.8);
  footer {
    height: 3.4rem;
    .related {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 0.3rem 0.1rem 0.3rem;
      div {
        i {
          display: block;
          width: 1rem;
          height: 100%;
          margin: auto;
        }
        i.likeFalse {
          background: url(../images/bbm.png) no-repeat;
          background-size: 100% 100%;
        }
        i.likeTrue {
          background: url(../images/bbp.png) no-repeat;
          background-size: 100% 100%;
        }
        img {
          width: 1rem;
          margin: auto;
        }
      }
      div.comment {
        position: relative;
        i.commentNum {
          position: absolute;
          z-index: 100;
          top: 0.2rem;
          right: -0.3rem;
          font-style: normal;
          color: #fff;
          font-size: 0.2rem;
          background-color: transparent;
        }
      }
    }
  }
  main {
    flex: 1;
    .disc {
      width: 70%;
      margin: auto;
      margin-top: 20%;
      position: relative;
      .pole {
        width: 2rem;
        position: absolute;
        top: -2rem;
        left: 2.2rem;
        transform: rotate(-20deg);
        transform-origin: 0.4rem 0.68rem;
        transition: 0.5s;
      }
      .pic {
        position: absolute;
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
        top: 0.9rem;
        left: 0.9rem;
      }
    }
  }
  header {
    .left {
      float: left;
      font-size: 0;
      i {
        display: inline-block;
        background: url(../images/back.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0.2rem;
      }
    }
    .center {
      float: left;
      text-align: left;
      .title {
        color: #fff;
        font-size: 0.36rem;
        font-weight: 900;
      }
      .name {
        font-size: 0.26rem;
        color: #bbbbbb;
        span {
          vertical-align: middle;
        }
        i {
          display: inline-block;
          background: url(../images/ba5.png) no-repeat;
          background-size: 100% 100%;
          width: 0.1rem;
          height: 0.2rem;
          vertical-align: middle;
          margin-left: 0.05rem;
        }
      }
    }
    .right {
      float: right;
      font-size: 0;
      i {
        display: inline-block;
        background: url(../images/bbq.png) no-repeat;
        background-size: 100% 100%;
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>